<template>
  <div class="app-container">
    <el-row type="flex" align="center" :gutter="20">
      <el-form class="filterData-block" label-position="left" :inline="true" label-width="auto">
        <el-form-item label="领取日期:">
          <el-date-picker
            v-model="filterData.time"
            size="small"
            clearable
            type="monthrange"
            range-separator="至"
            start-placeholder="开始月份"
            end-placeholder="结束月份">
            align="left"
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button size="small" icon="el-icon-search" type="primary" @click="refreshTable">搜索</el-button>
        </el-form-item>
      </el-form>
    </el-row>
    <el-row style="margin-top: 20px">
      <el-table v-loading="tableConf.loading" :stripe="true" :border="true" :data="tableData">
        <el-table-column align="center" width="50px" prop="id" label="ID"/>
        <el-table-column
          align="center"
          min-width="100px"
          label="年月"
          :formatter="formatYearMonth">
        </el-table-column>
        <el-table-column align="center" min-width="100px" prop="pname" label="姓名"/>
        <el-table-column align="center" min-width="100px" prop="userName" label="手机号"/>
        <el-table-column align="center" min-width="150px" prop="ename" label="企业名称"/>
        <el-table-column align="center" min-width="100px" prop="subsidyState" label="人社局审核状态">
          <template slot-scope="scope">
            <el-tag size="small" type="warning" v-if="scope.row.subsidyState === 1">待人社局审核</el-tag>
            <el-tag size="small" type="success" v-if="scope.row.subsidyState === 2 || scope.row.subsidyState === 4 || scope.row.subsidyState === 5">审核通过</el-tag>
            <el-tag size="small" type="danger" v-if="scope.row.subsidyState === 3">人社局拒绝申请</el-tag>
          </template>
        </el-table-column>
        <el-table-column align="center" min-width="100px" prop="subsidyState" label="银行审核状态">
          <template slot-scope="scope">
            <el-tag size="small" type="info" v-if="scope.row.subsidyState === 1 || scope.row.subsidyState === 3">未审核</el-tag>
            <el-tag size="small" type="warning" v-if="scope.row.subsidyState === 2">待银行审核</el-tag>
            <el-tag size="small" type="danger" v-if="scope.row.subsidyState === 4">银行拒绝申请</el-tag>
            <el-tag size="small" type="success" v-if="scope.row.subsidyState === 5">审核通过</el-tag>
          </template>
        </el-table-column>
        <el-table-column align="center" min-width="100px" prop="applicationState" label="补助的申领状态">
          <template slot-scope="scope">
            <el-tag size="small" type="info" v-if="scope.row.applicationState === 1">待申领</el-tag>
            <el-tag size="small" type="warning" v-if="scope.row.applicationState === 2">待发放</el-tag>
            <el-tag size="small" type="success" v-if="scope.row.applicationState === 3">已发放</el-tag>
            <el-tag size="small" type="danger" v-if="scope.row.applicationState === 4">已过期</el-tag>
          </template>
        </el-table-column>
        <el-table-column align="center" width="260px" label="操作">
          <template slot-scope="{row}">

            <el-button size="mini" type="primary" @click="handlerOpenDetail(1,row,true)">详情
            </el-button>

            <el-button v-if="row.subsidyState === 1" size="mini" icon="el-icon-edit"
                       type="primary"  @click="handlerOpenExamineEdit(1,row,true)">审核
            </el-button>

            <el-button v-if="row.subsidyState ===2 || row.subsidyState === 5" size="mini" icon="el-icon-edit"
                       type="primary"  @click="handlerOpenExamine(1,row,false)">审核
            </el-button>

          </template>
        </el-table-column>
      </el-table>
    </el-row>
    <el-row style="margin-top: 20px">
      <el-pagination
        :page-sizes="tableConf.sizes"
        :page-size="tableConf.size"
        :total="tableConf.total"
        :current-page="tableConf.page"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-row>

    <el-dialog
      class="custom-dialog"
      :visible.sync="detailDialogConfig.visible"
      title="详情"
      destroy-on-close
      :close-on-click-modal="false"
      top="10px"
      width="1200px"
    >
      <detail
        :view="detailDialogConfig.view"
        v-if="detailDialogConfig.visible"
        :is-create="detailDialogConfig.isCreate"
        :edit-data="detailDialogConfig.editData"
        @hideDetailDialog="hideDetailDialog"
      />
    </el-dialog>

    <el-dialog
      class="custom-dialog"
      :visible.sync="editExamineDialogConfig.visible"
      title="人社局审核"
      destroy-on-close
      :close-on-click-modal="false"
      top="10px"
      width="1200px"
    >
      <social-examine
        :view="editExamineDialogConfig.view"
        v-if="editExamineDialogConfig.visible"
        :is-create="editExamineDialogConfig.isCreate"
        :edit-data="editExamineDialogConfig.editData"
        @hideExamineEditDialog="hideExamineEditDialog"
      />
    </el-dialog>

    <el-dialog
      class="custom-dialog"
      :visible.sync="examineDialogConfig.visible"
      title="银行审核"
      destroy-on-close
      :close-on-click-modal="false"
      top="10px"
      width="1200px"
    >
      <examine
        :view="examineDialogConfig.view"
        v-if="examineDialogConfig.visible"
        :is-create="examineDialogConfig.isCreate"
        :edit-data="examineDialogConfig.editData"
        @hideExamineDialog="hideExamineDialog"
      />
    </el-dialog>


  </div>
</template>

<script>
import Advertisement from "@/components/SubsidyApplication/Detail.vue";
import {getAdminList} from "@/api/subsidyApplication";
import Examine from "@/views/subsidyApplication/examine.vue";
import Detail from "@/views/subsidyApplication/detail.vue";
import SocialExamine from "@/views/subsidyApplication/socialExamine.vue";
import Cookies from "js-cookie";

export default {
  components: {SocialExamine, Detail, Examine, Advertisement },
  data() {
    return {
      userType: 0,
      tableData: [],
      tableConf: {
        page: 1,
        sizes: [10, 20, 50, 100],
        total: 0,
        size: 10,
        loading: false
      },
      visible: {//控制弹窗显示
        0: false
      },
      filterData: {
        time: []
      },

      editExamineDialogConfig: {
        visible: false,
        isCreate: 0, // 0=创建，1=编辑
        editData: {},
        view: false,
      },
      detailDialogConfig: {
        visible: false,
        isCreate: 0, // 0=创建，1=编辑
        editData: {},
        view: false,
      },

      examineDialogConfig: {
        visible: false,
        isCreate: 0, // 0=创建，1=编辑
        editData: {},
        view: false,
      },

    }
  },
  mounted() {
    this.userType = JSON.parse(Cookies.get("user"))?.userType|| null;
    this.getTableList()
  },
  methods: {
    formatYearMonth(row) {
      const year = row.year;
      const month = row.month.toString().padStart(2, '0'); // 确保月份是两位数
      return `${year}-${month}`;
    },

    downloadCode(url) {
      window.open(url)
    },
    handlerOpenDetail(isCreate, editDate, view = false) {
      this.detailDialogConfig.editData = editDate
      this.detailDialogConfig.isCreate = isCreate
      this.detailDialogConfig.visible = true
      this.detailDialogConfig.view = view;
    },
    handlerOpenExamineEdit(isCreate, editDate, view = false) {
      if(this.userType!== 1){
        this.$message({
          message: '人社局正在审核，请耐心等待',
          type: 'warning'
        });
      }else{
        this.editExamineDialogConfig.editData = editDate
        this.editExamineDialogConfig.isCreate = isCreate
        this.editExamineDialogConfig.visible = true
        this.editExamineDialogConfig.view = view;
      }
    },
    handlerOpenExamine(isCreate, editDate, view = false) {
      if(this.userType!== 5 && this.tableData.find(item => item.id === editDate.id).applicationState!== 3){
        this.$message({
          message: '人社局已审核通过，银行正在审核',
          type: 'warning'
        });
      }else{
        this.examineDialogConfig.editData = editDate
        this.examineDialogConfig.isCreate = isCreate
        this.examineDialogConfig.visible = true
        this.examineDialogConfig.view = view;
      }

    },
    hideExamineEditDialog() {
      this.editExamineDialogConfig.visible = false
      this.editExamineDialogConfig.view = false;
      this.getTableList()
    },
    hideDetailDialog() {
      this.detailDialogConfig.visible = false
      this.detailDialogConfig.view = false;
      this.getTableList()
    },
    hideExamineDialog() {
      this.examineDialogConfig.visible = false
      this.examineDialogConfig.view = false;
      this.getTableList()
    },
    //关闭指定弹窗并刷新页面
    closeDialog(index) {
      this.visible[index] = false
      this.getTableList()
    },
    // 每页显示数量change
    handleSizeChange(e) {
      this.tableConf.size = e
      this.getTableList()
    },
    // 当前页change
    handleCurrentChange(e) {
      this.tableConf.page = e
      this.getTableList()
    },
    //获取列表
    getTableList() {

      this.tableConf.loading = true
      let startTime = "";
      let endTime = "";
      if(this.filterData.time!=null)
      {
        startTime = this.filterData.time[0];
        endTime = this.filterData.time[1];
      }
      getAdminList({

        page: this.tableConf.page,
        limit: this.tableConf.size,
        startTime: startTime,
        endTime: endTime

      }).then((res) => {
        this.tableData = res.list
        this.tableConf.total = res.count
      }).finally(() => {
        this.tableConf.loading = false
      })
    },
    refreshTable() {
      this.tableConf.page = 1
      this.getTableList()
    }
  }
}
</script>
<style lang="scss" scoped>
.filterData-block {
  .el-form-item {
    margin-bottom: 0;
  }
}
</style>
